(function(){
	var Carousel=function(poster){
		//find():查找
		var self=this;
		this.poster=poster;
		this.prebtn=$(this.poster).find("div.prebtn");
		this.nextbtn=$(this.poster).find("div.nextbtn");
		this.posterItemMain=$(this.poster).find("ul.poster-list");
		this.posterItems=$(this.poster).find("li.poster-item");
		this.posterFirstItem=this.posterItems.first();
		this.posterLastItem=this.posterItems.last();
		this.btnImg=$(this.poster).find("div.btn img");
		this.dir=0x501;
		
		this.setting={
		   "width":1000,
	       "height":320,
	       "posterWidth":800,
	       "posterHeight":300,
	       "scale":0.9,				//透明度
	       "autoplay":true,
	       "speed":1000,			//切换时间
	       "director":"right",
	       "deplay":2000			//切换延时
		}
		
		jQuery.extend(self.setting,self.getSetting());
		
		this.setInitStyle();
		this.layerShow();
		this.clickListerner();
		//点击向左切换，点击一次需执行完一次后再次点击才会有效果（这里通过autoplay控制）
		this.prebtn.click(function(){
			if(self.setting.autoplay){				//当self.setting.qutoplay为true时执行
				self.setting.autoplay=false;		//将self.setting.qutopla设置为false
				self.dir=0x502;
				self.carousel("left");				//调用carousel方法并传入向左切换的条件
			}
		})
		//点击向右切换
		this.nextbtn.click(function(){
			if(self.setting.autoplay){				//当self.setting.qutoplay为true时执行
				self.setting.autoplay=false;
				self.dir=0x501;
				self.carousel("right");				//调用carousel方法并传入向右切换的条件
			}
		})
		//自动切换
		if(this.setting.autoplay){
			self.setAutoPlay(self.dir);				//判断切换方向
			this.poster.hover(function(){
				window.clearInterval(self.timer);	//鼠标移入时清除事件
			},function(){
				self.setAutoPlay(self.dir);			//鼠标移出后恢复自动切换
			})
		}
		
		
	}
	//原型 prototype
	Carousel.prototype={
		//封装一个自动切换的方法，默认向右切换，通过鼠标点击按钮判断向哪边执行
		setAutoPlay:function(dir){
			var self=this;	
			if(dir==0x501){										//向右自动切换
				self.timer=window.setInterval(function(){	
					self.nextbtn.click();
				},self.setting.deplay);
			}else if(dir==0x502){								//向左自动切换
				self.timer=window.setInterval(function(){
					self.prebtn.click();
				},self.setting.deplay);							//切换延时时间
			}
		},
		
		//右旋转
		carousel:function(director){
			var _this_=this;
			var zindexArr=[];
			if(director==="right"){
				this.posterItems.each(function(i,obj){								//i:下标;obj当前对象
					var self=$(this);
					var pre=self.prev().get(0)?self.prev():_this_.posterLastItem;	//判断第0张和第6张
					var prewidth=pre.css("width"),
					    preheight=pre.css("height"),
					    pretop=pre.css("top"),
					    preleft=pre.css("left"),
					    preopacity=pre.css("opacity"),
					    prezindex=pre.css("z-index");	
					    
					    zindexArr.push(prezindex);									//向zindexArr数组添加prezindex即层级，层级越高，图片越靠前显示
					    
					    $(obj).animate({
					    	width:prewidth,
					    	height:preheight,
					    	top:pretop,
					    	left:preleft,
					    	opacity:preopacity
					    },_this_.setting.speed,function(){							//此处function为回调函数，当动画执行完后执行函数，将当前autoplay的值设为true
					    	_this_.setting.autoplay=true;
					    });
				});
				
				_this_.posterItems.each(function(i){
					$(this).css({
						"z-index":zindexArr[i]
					})
				});
			
			}else if(director==="left"){
				//左旋转
				this.posterItems.each(function(i,obj){
					var self=$(this);
					var next=self.next().get(0)?self.next():_this_.posterFirstItem;//判断第0张和第6张
					var nextwidth=next.css("width"),
						nextheight=next.css("height"),
						nexttop=next.css("top"), 
						nextleft=next.css("left"),
						nextopacity=next.css("opacity"),
						nextzindex=next.css("z-index");
						
						zindexArr.push(nextzindex);
						
						$(obj).animate({
							width:nextwidth,
							height:nextheight,
							top:nexttop,
							left:nextleft,
							opacity:nextopacity
							
						},_this_.setting.speed,function(){
							_this_.setting.autoplay=true;
						});
				});
				
				this.posterItems.each(function(i){
					$(this).css({
						"z-index":zindexArr[i]
					})
				});
			}
		},
		
		layerShow:function(){
			var posterheight=this.setting.posterHeight,
			    posterwidth=this.setting.posterWidth,
			    postItems=$(this.poster).find(".poster-item").slice(1),
			    layer=postItems.length/2,
			    leftSlice=$(postItems).slice(0,layer),
			    rightSlice=$(postItems).slice(layer),
			    //计算除了第一张postitem宽度后左边和右边的剩余宽度
			    lrw=(this.setting.width-this.setting.posterWidth)/2,
			    selfScale=this.setting.scale,
			    llevel=layer,
			    rlevel=layer;
			    
			
			//显示左边的帧数
			//计算左边第一张的宽度，高度,距离左边框距离
			var rh=this.setting.posterHeight*this.setting.scale,
			    gap=((this.setting.width-this.setting.posterWidth)/2)/3; 
				
			leftSlice.each(function(i){
				var _this_=this;
				var lefttop=(posterheight-rh)/2;
				var j=i;
				j++;
				var subgap=lrw-gap*j;
	
				$(_this_).css({
					"height":rh,
					"width":posterwidth,
					"position":"absolute",
					"top": lefttop,
					"left":subgap,
					"opacity":1/j,
					"z-index":llevel
				})
				rh=rh*selfScale;
				llevel--;
			})
			
			
			//设置右边显示的帧数
			var rtop=this.setting.posterHeight*this.setting.scale;
			var m=0;
			    
			for(var i=rightSlice.length-1;i>=0;i--){
				m++;
				var rhtop=(posterheight-rtop)/2;
				var rleftloction=lrw+gap*m;
			
				
				$(rightSlice[i]).css({
					"height":rtop,
					"width":posterwidth,
					"position":"absolute",
					"top":rhtop,
					"left":rleftloction,
					"opacity":1/m,
					"index":rlevel
				})
				
				rtop=rtop*selfScale;
				rlevel--;
			}
			
			m=0;
		},
		
		setInitStyle:function(){
			//得到btn的宽度
			var lbtnw=80;
			//求右边的宽度
			var rbtloaction=lbtnw+this.setting.posterWidth+20;
			//求出图片距离poster-main的top
			var padTop=(this.setting.height-this.setting.posterHeight)/2;
			//去除btn图片的高度
			var btnheight=$(".btn img").height();
			//计算出btn的垂直位置
			var btnMagin=(this.setting.height-btnheight)/2;
			var itemLocation=(this.setting.width/2-this.setting.posterWidth/2);
			
			//设置最外层div的大小
			this.poster.css({
				"width":this.setting.width,
				"height":this.setting.height
			});
			
			//设置ul的大小
			this.posterItemMain.css({
				"width":this.setting.width,
				"height":this.setting.height,
				"margin-top":padTop,
				"position":"relative"
			})
			
			//设置li的大小
			this.posterItems.css({
				"width":this.setting.posterWidth,
				"height":this.setting.posterHeight,
				"position":"absolute",
				"top":"0px",
				"left":itemLocation
			})
			
			//设置左边btn的大小，水平位置
			this.prebtn.css({
				"float": "left",
				"width": lbtnw,
				"height": "100%",
				"opacity": "0",
				"display":"inline-block",
				"text-align":"center",
				"z-index":10
			});
			
			//设置btn中图片的位置
			this.btnImg.css({
				"margin-top":btnMagin
			})
			
			//设置右边btn的大小，水平位置
			this.nextbtn.css({
				"width": lbtnw,
				"height": "100%",
				"opacity": "0",
				"display":"inline-block",
				"text-align":"center",
				"position":"absolute",
				"right":0,
				"z-index":10
			});
			
			this.posterFirstItem.css({
				"z-index":10
			})
		},
		
		clickListerner:function(){
			//设置左边鼠标移上去时的效果
			this.prebtn.mouseenter(function(){
				$(this).css({
					"background-color":"gray",
					"opacity":"0.5"
				});
			});
			
			//设置左边鼠标移开后的效果
			this.prebtn.mouseleave(function(){
				$(this).css({
					"background-color":"white",
					"opacity":"0"
				});
			});
			
			//设置右边鼠标移上去时的效果
			this.nextbtn.mouseenter(function(){
				$(this).css({
					"background-color":"gray",
					"opacity":"0.5",
				});
				
			});
			
			//设置右边鼠标移开后的效果
			this.nextbtn.mouseleave(function(){
				$(this).css({
					"background-color":"white",
					"opacity":"0"
				});
			});
		},
		
		getSetting:function(){
			var setting=this.poster.attr("data-setting");
			if(setting && setting!=""){				
				return jQuery.parseJSON(setting);
			}else{
				return {};
			}
		}
		
	};
	//调用
	Carousel.init=function(posters){
		var _this_=this;
		posters.each(function(i){
			new _this_($(this));		//new一个新对象
		})
	};
	
	window["Carousel"]=Carousel;		//为Carousel创建一个Carousel属性
	
})()
	
		
		
	

	

